<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar</title>
    <style>
        body{
            background-color: #FFFFCC;
        }

        .screen{
            height: 30px;
            background-color:#FFFFCC;
            width: 50px;
            border: 0px 0px 1px 0px solid;
            margin: 80px auto 20px auto;
            box-shadow: 0px -3px 3px 0px #777444;
            text-align:center
        }

        .total{
            font-size: 1px;
            height: 100%;
        }
        .processbar{
            width: 450px;
            /* border: 1px solid; */
            border-radius: 9px;
            box-shadow: 0px -2px 4px 0px #777777;
            margin: 0 auto;
            height: 25px;
        }
        #bar{
            /* background:#FF6666;   */
            box-shadow: 0px 0px 24px 2px #FF0033 inset;
            float:left;
            height:100%;
            text-align:center;
            line-height:150%;
            border-radius: 9px;
        }
    </style>
    <script>
        function run(){
            var bar=document.getElementById("bar");
            var total=document.getElementById("total");
            bar.style.width=parseInt(bar.style.width)+1+"%";
            total.innerHTML=bar.style.width;
            if(bar.style.width=="100%"){
                // window.clearTimeout(timeout);
                bar.style.width="0%";
                //return;
            }
            var timeout=window.setTimeout("run()",100);
        }
        window.onload=function(){
            run();
        }
    </script>
</head>

<body>
<div class="screen">
    <span id="total"></span>
</div>
<div class="processbar">
    <div id="bar" style="width: 10%;"></div>

</div>
</body>
</html>
